<template>
  <div>
      <div v-for="item,i in timeline" :key="i" class="timeline">
            <div class="left">{{item.range}}</div>
            <div class="right">
                <p v-for="art,i in item.articles" :key="i">
                    {{art}}
                </p>
            </div>
      </div>
  </div>
</template>
<script>
export default {
    props:['timeline']
};
</script>
<style scoped>
.timeline{
    display: flex;
}
.left{
    flex: 1;
    font-size: 1.4em;
    font-weight: bold;
}
.right{
    flex: 4;
}
.timeline p{
    text-indent: 2em;
    line-height: 1.6em;
    margin-bottom: 1em;
}
.timeline{
    padding: 2em;
    border-bottom: 1px solid rgb(223, 223, 223);
}
</style>